<template>
  <div>
    <div class="public-common">
        <div class="public-title" style="text-indent: 20px;;">公章使用记录列表</div>
        <div class="inline-btn">
          <label>申请部门：</label>
          <el-input v-model="searchdata.txtApplyDeptName"></el-input>
          <label>申请人：</label>
          <el-input v-model="searchdata.txtApplicant"></el-input>
          <label>用章公文名称：</label>
          <el-input v-model="searchdata.txtOfficialFileName"></el-input>
        </div>
        <div class="inline-btn">
          <label>用章文号：</label>
          <el-input v-model="searchdata.txtFileNo"></el-input>
          <label>公章类型：</label>
          <el-input v-model="searchdata.txtSealType"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
          <el-button type="warning" @click="rejectBtn">注销</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="ApplyDeptName"  label="申请部门" ></el-table-column>
            <el-table-column prop="ApplyTime"  label="申请时间" ></el-table-column>
            <el-table-column prop="Applicant"  label="申请人" ></el-table-column>
            <el-table-column prop="OfficialFileName"  label="用章公文名称" ></el-table-column>
            <el-table-column prop="FileNo"  label="用章文号" ></el-table-column>
            <el-table-column prop="UseReason"  label="用章事由" ></el-table-column>
            <el-table-column prop="SealType"  label="公章类型" ></el-table-column>
            <el-table-column prop="IsMustAudit"  label="是否需要审批" ></el-table-column>
            <el-table-column prop="Approver"  label="审批人" ></el-table-column>
            <el-table-column prop="ApproveTime"  label="审批时间" ></el-table-column>
            <el-table-column prop="RecordTime"  label="记录时间" ></el-table-column>
            <el-table-column prop="IsCanceled"  label="注销标志" ></el-table-column>
            <el-table-column prop="Memo"  label="备注" ></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--dialog-->
    <el-dialog title="公章使用记录登记" :visible.sync="dialogVisible">
      <span>
        <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
        <el-form-item label="申请部门：" prop="txtApplyDept">
          <el-select v-model="formData.txtApplyDept" placeholder="请选择申请部门">
            <el-option v-for="(t,i) in dutyList" :label="t" :key="i" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间：" prop="txtApplyTime">
          <el-date-picker  type="datetime" v-model="formData.txtApplyTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
        </el-form-item>
        <el-form-item label="申请人：" prop="txtApplicant">
          <el-select v-model="formData.txtApplicant" placeholder="请选择申请人">
            <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用章公文名称：" prop="txtOfficialFileName">
          <el-input v-model="formData.txtOfficialFileName" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="用章公文文号：" prop="txtFileNo">
          <el-input v-model="formData.txtFileNo" style="width: 220px;"></el-input>
        </el-form-item>
         <el-form-item label="用章事由：" prop="txtUseReason">
          <el-input v-model="formData.txtUseReason" style="width: 220px;" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="公章类型：" prop="txtSealType">
          <el-select v-model="formData.txtSealType" placeholder="请选择公章类型">
            <el-option v-for="(t,i) in sealType" :label="t" :key="i" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否需要审批：" prop="txtIsMustAudit">
          <el-checkbox label="需要审批" v-model="formData.txtIsMustAudit" @change="checkAudit"></el-checkbox>
        </el-form-item>
        <el-form-item label="审批人：" prop="txtApprover">
          <el-input v-model="formData.txtApprover" style="width: 220px;" :disabled="isCheck"></el-input>
        </el-form-item>
        <el-form-item label="审批时间：" prop="txtApproveTime">
          <el-date-picker v-model="formData.txtApproveTime" :disabled="isCheck" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="记录人：" prop="txtRecorder">
          <el-select v-model="formData.txtRecorder" placeholder="请选择记录人">
            <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="txtMemo">
          <el-input v-model="formData.txtMemo" style="width: 220px;" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="注销标志：" prop="txtIsCanceled">
          <el-checkbox label="已注销" v-model="formData.txtIsCanceled"></el-checkbox>
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData('formData',1)">应用</el-button>
        <el-button type="primary" @click="submitData('formData',2)">确 定</el-button>
        <el-button @click="cancelBtn('formData')">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {seal} from '@/ajax';
import common from '@/utils/common.js';
import config from './Manage.js';
export default {
    data(){
        return {
          searchdata:{
            txtApplyDeptName:'',txtApplicant:'',txtOfficialFileName:'',
            txtFileNo:'',txtSealType:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          dialogVisible:false,
          formData:{txtApplyDept:'',txtApplyTime:'',txtApplicant:'',txtOfficialFileName:'',
                    txtFileNo:'',txtUseReason:'',txtSealType:'',txtIsMustAudit:'',
                    txtApprover:'',txtApproveTime:'',txtRecorder:'',txtMemo:'',txtIsCanceled:''},
          formRule:{
            txtApplyDept:{required:true,message:'请选择申请部门',trigger:'blur'},
            txtApplicant:{required:true,message:'请选择申请人',trigger:'blur'},
            txtOfficialFileName:{required:true,message:'请填写用章公文名称',trigger:'blur'},
            txtUseReason:{required:true,message:'请填写用章事由',trigger:'blur'},
            txtSealType:{required:true,message:'请选择公章类型',trigger:'blur'},
            txtRecorder:{required:true,message:'请选择记录人',trigger:'blur'},
          },
          selection:[],
          common:common,
          config:config,
          sealType:config.sealType,
          usedList:[{'id':'123','name':'lily'}],
          dutyList:config.dutyList,
          isCheck:true
        }
    },
    mounted(){
      this.getSealRecordList();
    },
    inject:['reload'],
    methods:{
      searchBtn(){
        this.getSealRecordList();
      },
      //getSealRecordList,deleteSealRecord,addSealRecord,rejectSealRecord
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['sealID'])
          }
        }
      },
      checkAudit(){
        this.isCheck = !this.isCheck
      },
      getSealRecordList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        this.tableData =config.assetsList;
        this.totalnum = this.tableData.length;
        /* seal.getSealRecordList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取文件阅办单列表失败');
          }) */
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getSealRecordList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getSealRecordList();
      },
      addBtn(){
        this.formData.txtApplyTime = common.getFormatterTime('yyyy-MM-dd HH:mm');
        this.dialogVisible = true;
      },
      cancelBtn(form){
        this.$refs[form].clearValidate();
        this.$refs[form].resetFields();
        this.dialogVisible=false;
      },
      rejectBtn(){
        this.$confirm('您确定要注销所选择的记录吗？', '操作提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
           seal.rejectSealRecord(this.selection).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，注销失败');
            })
        }).catch();
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
          this.$confirm('您确定要删除所选择的记录吗？删除的数据将无法恢复!', '操作提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
             seal.deleteSealRecord(this.selection).then((res) => {
                if (res.data.code == '00000') {
                  this.reload()
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，删除失败');
              })
          }).catch();
        }
      },
      //进行添加（通过type区分应用确定，应用1确定2）
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          if(valid){
            if(this.formData.txtIsMustAudit){
              if(!this.formData.txtApprover || !this.formData.txtApproveTime){
                this.$message('审批人/审批时间不能为空')
              }else{
                seal.addSealRecord(this.formData).then((res) => {
                    if (res.data.code == '00000') {
                      if(type == 1){
                        this.$refs[form].resetFields();
                      }else{
                        this.reload()
                      }
                    } else {
                      this.$message(res.data.message);
                    }
                  }).catch(()=>{
                    this.$message('服务器正忙，操作失败');
                })
              }
            }
          }else{
            return false
          }
        })
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input,.el-select,.el-date-picker{width: 200px !important;}
    .left{display: inline-block;;width:64%;float: left;}
    .right{display: inline-block;;width:35%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
}
</style>
